<template>
  <div class="login_contain">
    <div class="login_form">
      <p class="login_title">小太阳后台管理系统</p>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="70px"
          class="form_content"
          status-icon
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"/>
        </el-form-item>
        <el-form-item prop="checked">
          <el-checkbox v-model="ruleForm.checked" label="记住密码" size="small"/>
        </el-form-item>
        <el-row>
          <el-button class="login_btn" type="primary" @click="handleSubmit(ruleFormRef)">登录</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {loginDataClass, loginFormData} from "@/interface/login";
import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue";
import {FormInstance, FormRules} from "element-plus";
import request from "@/utils/request";
import {ResponseData} from "@/interface/response";
import {useRouter} from "vue-router";
import userStore from "@/store/modules/user";

const {proxy}: any = getCurrentInstance()

const userPinia = userStore()


const router = useRouter()

let ruleForm = reactive(new loginDataClass()).ruleForm
const rules = reactive<FormRules<loginFormData>>({
  userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}],
})
const ruleFormRef = ref<FormInstance>()

onMounted(() => {
  const checkPassword = localStorage.getItem('checkPassword')
  if (checkPassword && checkPassword === 'true') {
    const loginDataString = localStorage.getItem('loginData') || ''
    const loginData = JSON.parse(loginDataString)
    ruleForm.userName = loginData.userName
    ruleForm.password = loginData.password
    ruleForm.checked = true
  }
  /*proxy.$HttpClient.get('/p/bubble/list', {
    params: {
      current: 1,
      size: 10,
      latitude: 23,
      longitude: 134
    }
  }).then((res: any) => {
    console.log(56555555, res)
  })*/
})

const handleSubmit = async (formE1: FormInstance | undefined) => {
  if (!formE1) return
  await formE1.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm)
      proxy.$HttpClient.post('/api/login', {
        userName: ruleForm.userName,
        password: ruleForm.password,
        checked: ruleForm.checked
      }).then(async (res: any) => {
        console.log(112, res)
        if (res.code === 200) {
          sessionStorage.setItem('token', res.data.token)
          if (ruleForm.checked) {
            localStorage.setItem('checkPassword', 'true')
            localStorage.setItem('loginData', JSON.stringify({
              userName: ruleForm.userName,
              password: ruleForm.password,
            }))
          } else {
            localStorage.removeItem('checkPassword')
            localStorage.removeItem('loginData')
          }

          userPinia.saveUserInfo({
            userName: ruleForm.userName,
            password: ruleForm.password,
          })
          await userPinia.saveMenuList()
          console.log(999, userPinia.getMenuList)
          router.push({
            path: '/home/index'
          })
        }
      })
      /*request({
        url: '/api/login',
        method: 'post',
        data: {
          userName: ruleForm.userName,
          password: ruleForm.password,
          checked: ruleForm.checked
        }
      }).then(async (res: any) => {
        console.log(112, res)
        if (res.code === 200) {
          sessionStorage.setItem('token', res.data.token)
          if (ruleForm.checked) {
            localStorage.setItem('checkPassword', 'true')
            localStorage.setItem('loginData', JSON.stringify({
              userName: ruleForm.userName,
              password: ruleForm.password,
            }))
          } else {
            localStorage.removeItem('checkPassword')
            localStorage.removeItem('loginData')
          }

          userPinia.saveUserInfo({
            userName: ruleForm.userName,
            password: ruleForm.password,
          })
          await userPinia.saveMenuList()
          console.log(999, userPinia.getMenuList)
          router.push({
            path: '/home/index'
          })
        }
      })*/
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style lang="less" scoped>
.login_contain {
  height: 100vh;
  width: 100vw;
  background: url("../../assets/img/bjIndex.jpg") no-repeat center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login_form {
  width: 320px;
  height: 265px;
  background: white;
  border-radius: 5px;
  padding: 20px 40px;
}

.login_title {
  text-align: center;
  font-size: 18px;
  color: #15bafe;
  font-weight: bold;
}

.form_content {
  margin-top: 20px;
}

.form_content_item {
  display: flex;
  align-items: center;
  margin-top: 20px;

  .icon_prefix {
    font-size: 20px;
    color: #666666;
  }

  .form_content_item_p {
    width: 60px;
    text-align: center;
    color: #666666;
    font-size: 14px;
    font-weight: 400;
  }

  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  .login_input {
    width: 250px;
  }

  .form_content_item_check {
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    margin-left: 10px;
    margin-top: -3px;
  }
}


.login_btn {
  width: 100%;
}
</style>
